<template>
	<view v-if="!isLoading" class="container" :style="appThemeStyle">
		<view class="main-header"
			:style="{ height: platform == 'H5' ? '180rpx' : '330rpx', paddingTop: platform == 'H5' ? '0' : '300rpx' }">
			<image class="bg-image" src="/static/background/order-header.png" mode="scaleToFill"></image>
			<view class="posBtn" @click="goBack()">
				<image class="image" src="/static/illustration/fan.png" mode="scaleToFill"></image>
			</view>
			<!-- 订单状态下层 -->
				<view class="posStaticBot">{{order.state_text}}</view>
			<!-- <view class="posStaticBot">{{order.state_text}}</view> -->
		</view>
		<view class="card-area">
			<!-- 订单状态上层 -->
			<!-- <view
				v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"
				class="posStaticTop" @click="handleTargetExpress()"> -->
			<view class="posStaticTop" @click="handleTargetExpress()">
				<!-- <view v-if="order.state_text == '已取消'" class="topStatus">已取消，交易关闭</view> -->
				<view class="topStatus">{{order.state_text}}</view>
				<view class="order-status">
					<view class="order-dizhi">
						<view class="dizhi-flex">
							<view class="status-icon">
								<!-- 进行中的订单 -->
								<block v-if="order.order_status == OrderStatusEnum.NORMAL.value">
									<!-- 待支付 -->
									<block v-if="order.pay_status == PayStatusEnum.PENDING.value">
										<image class="image" src="/static/order/status/pay.png" mode="aspectFit">
										</image>
									</block>
									<!-- 待发货 -->
									<block v-else-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
										<image class="image" src="/static/order/status/pay.png" mode="aspectFit">
										</image>
									</block>
									<!-- 待收货 -->
									<block v-else-if="order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
										<image class="image" src="/static/order/status/wait_receipt.png"
											mode="aspectFit"></image>
									</block>
									<block v-else>
										<image class="image" src="/static/order/status/yes.png"
											mode="aspectFit"></image>
									</block>
								</block>
								<!-- 已完成 -->
								<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value">
									<image class="image" src="/static/order/status/yes.png" mode="aspectFit">
									</image>
								</block>
								<!-- 已退款 -->
								<block v-if="order.state_text == '已退款'">
									<image class="image" src="/static/order/status/yes.png" mode="aspectFit">
									</image>
								</block>
								<!-- 已取消/待取消 -->
								<block
									v-if="order.order_status == OrderStatusEnum.CANCELLED.value || order.order_status == OrderStatusEnum.APPLY_CANCEL.value">
									<image class="image" src="/static/order/status/yes.png" mode="aspectFit"></image>
								</block>
							</view>
							<view class="status-text">
								<text v-if="order.state_text == '待收货'">运输中</text>
								<text v-else>{{ order.state_text }}</text>
							</view>
						</view>
						<view class="statu-wuliu">
							<!-- <view v-if="order.delivery[0].express_remark !== ' ' ">
								<text class="itemwu-shuju">{{ order.delivery[0].express_remark}}</text>
							</view> -->
							<view class="info-item" v-if="order.delivery.length > 0">
								<view class="item-lable">物流单号：</view>
								<view class="item-content" v-if= "order.delivery[0].express_remark !== '' && order.delivery[0].express_no == '' ">
									<text
										class="itemwu-shuju">{{ order.delivery[0].express_remark }}</text>
								</view>
								<view class="item-content" v-if= "order.delivery[0].express_no !== '' ">
									<text
										class="itemwu-shuju">{{ order.delivery[0].express_no ? order.delivery[0].express_no : '--' }}
										|</text>
									<view v-if="order.delivery[0].express_no" class="act-copy"
										@click.stop="handleCopy(order.delivery[0].express_no)">
										<text>复制</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="right-arrow">
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
			</view>
			<!-- 实物订单 -->
			<block v-if="order.order_type == OrderTypeEnum.PHYSICAL.value">
				<view v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value" class="statuskong"></view>
				<!-- 快递配送：配送地址 -->
				<view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value" class="delivery-address i-card">
					<view class="address">
						<image class="area-image" src="/static/illustration/area.png" mode="scaleToFill"></image>
						<text class="region" v-for="(region, idx) in order.address.region"
							:key="idx">{{ region }}</text>
						<text class="detail">{{ order.address.detail }}</text>
					</view>
					<view class="link-man">
						<text class="name">{{ order.address.name }}</text>
						<text class="phone">{{ order.address.phone }}</text>
					</view>

				</view>
			</block>

			<!-- 物流信息 -->
			<!-- <view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value
			       && order.delivery_status == DeliveryStatusEnum.DELIVERED.value
			        && order.delivery
			         && order.delivery.length" class="express i-card" @click="handleTargetExpress()">
				<view v-if="order.delivery.length > 1" class="main">
					<view class="info-item">
						<view class="item-content">
							<text>订单已拆分多个包裹发货</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-content">
							<text>已发货{{ order.delivery.length }}个包裹</text>
						</view>
					</view>
				</view>
				<view v-else class="main">
					<view class="info-item">
						<view class="item-lable">物流公司：</view>
						<view class="item-content">
							<text class="item-shuju"
								v-if="order.delivery[0].delivery_method != DeliveryMethodEnum.UNWANTED.value">{{ order.delivery[0].express ? order.delivery[0].express.express_name : '--' }}</text>
							<text v-else>无需物流</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">物流单号：</view>
						<view class="item-content">
							<text
								class="item-shuju">{{ order.delivery[0].express_no ? order.delivery[0].express_no : '--' }}
								|</text>
							<view v-if="order.delivery[0].express_no" class="act-copy"
								@click.stop="handleCopy(order.delivery[0].express_no)">
								<text>复制</text>
							</view>
						</view>
					</view>
				</view>
				<view class="right-arrow">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view> -->

			<!-- 商品列表 -->
			<view class="kong"></view>
			<view class="goods-list i-card">
				<view class="goods-item" v-for="(goods, idx) in order.goods" :key="idx">
					<view class="goods-main" @click="handleTargetGoods(goods.goods_id)">
						<!-- 商品图片 -->
						<view class="goods-image">
							<image class="image" :src="goods.goods_image" mode="scaleToFill"></image>
						</view>
						<!-- 商品信息 -->
						<view class="goods-content">
							<view class="goods-title"><text class="twoline-hide">{{ goods.goods_name }}</text></view>
							<view class="goods-trade">
								<view class="goods-price">
									<text class="unit">￥</text>
									<text
										class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text>
								</view>
								<view class="goods-num">
									<text>×{{ goods.total_num }}</text>
								</view>
							</view>
							<view class="goods-props clearfix">
								<view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx">
									<text>{{ props.value.name }}</text>
								</view>
							</view>
						</view>
						<!-- 交易信息 -->
					</view>
					<!-- 商品售后 -->
					<view class="refound-flex">
						
					<view class="goods-refund" v-if="order.goods.length >1">
						<text v-if="goods.refund && goods.refund.state_text == '等待审核中'" class="stata-text" @click="onReCancle(goods.refund.order_refund_id)">撤销申请</text>
					</view>
					<view class="goods-refund">
						<text v-if="goods.refund && goods.refund.state_text != '已取消'" class="action-btn" @click="tuiInfo(goods.refund.order_refund_id)">已申请售后</text>
						<view v-else-if="order.isAllowRefund && order.state_text !='已完成'" class="action-btn" @click.stop="handleApplyRefund(goods.order_goods_id)">申请售后</view>
					  </view>
					  </view>
					 <!-- <text v-if="goods.refund" class="stata-text">已申请售后</text> -->
					 <!-- <view v-else-if="order.isAllowRefund" class="action-btn" @click.stop="handleApplyRefund(goods.order_goods_id)">申请售后</view> -->
					<!-- <view class="goods-refund">
						<text v-if="goods.refund && goods.refund.state_text =='等待审核中'" class="stata-text" @click="tuiInfo(goods.refund.order_refund_id)">已申请售后</text>
						<view v-if="order.goods.length >1">
							<view class="action-btn" v-if="goods.refund && goods.refund.state_text == '等待审核中' " @click="onReCancle(goods.refund.order_refund_id)">撤销申请</view>
							<view v-if="goods.refund && goods.refund.state_text =='已取消'" class="action-btn"
									@click.stop="handleApplyRefund(goods.order_goods_id)">申请售后</view>
						</view>
						<view v-if="order.goods.length == 1 && order.isAllowRefund" class="action-btn"
							@click.stop="handleApplyRefund(goods.order_goods_id)">申请售后</view>
					</view> -->
				</view>
			</view>
			<view class="kong"></view>
			<!-- 结算信息 -->
			<view class="trade-info i-card">
				<view class="info-item">
					<view class="item-lable">商品总价</view>
					<view class="item-content">
						<text class="all-price">￥{{ order.total_price }}</text>
					</view>
				</view>
				<view v-if="order.coupon_money > 0" class="info-item">
					<view class="item-lable">优惠券抵扣</view>
					<view class="item-content">
						<text class="all-price">-￥{{ order.coupon_money }}</text>
					</view>
				</view>
				<view v-if="order.points_money > 0" class="info-item">
					<view class="item-lable">{{ setting.points_name }}抵扣</view>
					<view class="item-content">
						<text class="all-price">-￥{{ order.points_money }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">运费</view>
					<view class="item-content">
						<text class="all-price">￥{{ order.express_price }}</text>
					</view>
				</view>
				<view v-if="order.update_price.value != '0.00'" class="info-item">
					<view class="item-lable">后台改价</view>
					<view class="item-content">
						<text class="all-price">{{ order.update_price.symbol }}</text>
						<text class="all-price">￥{{ order.update_price.value }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">实付款</view>
					<view class="item-content">
						<text class="pay-all">￥{{ order.pay_price }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">备注</view>
					<view class="item-content">
						<text class="all-price">{{ order.buyer_remark ? order.buyer_remark : '无' }}</text>
					</view>
				</view>
				<!-- <view class="divider"></view> -->
				<!-- <view class="trade-total">
	      <text class="lable">实付款</text>
	      <view class="goods-price">
	        <text class="unit">￥</text>
	        <text class="value">{{ order.pay_price }}</text>
	      </view>
	    </view> -->
			</view>
			<view class="kong"></view>
			<!-- 订单信息 -->
			<view class="order-info i-card">
				<view class="info-item">
					<view class="item-lable">订单编号</view>
					<view class="item-content">
						<text>{{ order.order_no }} | </text>
						<view class="act-copy" @click="handleCopy(order.order_no)">
							<text>复制</text>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">下单时间</view>
					<view class="item-content">
						<text>{{ order.create_time }}</text>
					</view>
				</view>
				<view v-if="order.goods[0].refund !==null" class="info-item">
					<view class="item-lable">付款时间</view>
					<view class="item-content">
						<text>{{ order.goods[0].refund.create_time }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view v-if="order.order_status != OrderStatusEnum.CANCELLED.value" class="footer-fixed">
			<view class="btn-wrapper">
				<!-- 未支付取消订单 -->
				<!-- <block v-if="order.pay_status == PayStatusEnum.PENDING.value">
					<view class="btn-item" @click="onCancel(order.order_id)">取消</view>
				</block> -->
				<!-- 已支付进行中的订单 -->
				<block v-if="order.order_status != OrderStatusEnum.APPLY_CANCEL.value">
					<block
						v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
						<view class="btn-item hui" @click="handleAddCart(order)">加入购物车</view>
					</block>
					<block
						v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
						<view class="btn-item hui" @click="onCancel(order.order_id)">取消订单</view>
					</block>
				</block>

				<!-- 取消审核中订单 -->
				<view v-else class="f-28 col-8">
					<view class="btn-item gou-pay" @click="onRevokeCancel(order.order_id)">撤销申请</view>
				</view>
				<!-- 未支付的订单 -->
				<block v-if="order.pay_status == PayStatusEnum.PENDING.value">
					<view class="btn-item active item-pay" @click="onPay(order.order_id)">去支付</view>
				</block>
				
				
				
				<!-- 撤销退款 -->
				<view v-if="order.goods.length == 1 && order.goods[0].refund !==null"  class="goods-item" v-for="(goods, idx) in order.goods" :key="idx">
					<!-- 未确认收货前申请退款售后 -->
					<block
						v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value && order.goods.refund !==null && goods.refund.state_text != '已取消' && goods.refund.state_text != '已同意退货并已退款' ">
						<view class="btn-item hui" @click="tuiInfo(order.goods[0].refund.order_refund_id)">查看详情</view>
					</block>
					<block
						v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value && order.goods.refund !==null && goods.refund.state_text != '已取消' && goods.refund.state_text != '已同意退货并已退款' ">
						<view class="btn-item gou-pay" @click="onReCancle(goods.refund.order_refund_id)">撤销申请</view>
					</block>
					<block
						v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value && order.goods.refund !==null && goods.refund.state_text === '已取消' ">
						<view class="btn-item item-gou-pay" @click="onReceipt(order.order_id)">确认收货</view>
					</block>
					<block
						v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value && goods.refund == null">
						<view class="btn-item item-gou-pay" @click="onReceipt(order.order_id)">确认收货</view>
					</block>
				</view>
				<view v-if="order.goods.length == 1 && order.goods[0].refund ===null"  class="goods-item" v-for="(goods, idx) in order.goods" :key="idx">
					<!-- 未确认收货前申请退款售后 -->
					<block
						v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
						<view class="btn-item item-gou-pay" @click="onReceipt(order.order_id)">确认收货</view>
					</block>
					
				</view>
				<!-- 未申请售后订单 确认收货 -->
				<block v-if="order.goods.length > 1 && order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
					<view class="btn-item active item-pay" @click="onReceipt(order.order_id)">确认收货</view>
				</block>
				
				<!-- 订单评价 -->
				<block
					v-if="order.order_status == OrderStatusEnum.COMPLETED.value && order.is_comment == 0 && order.goods[0].refund ===null">
					<view class="btn-item item-pay" @click="handleTargetComment(order.order_id)">发布评论</view>
				</block>
				<!-- 确认收货后申请退款售后 -->
				<block
					v-if="order.order_status == OrderStatusEnum.COMPLETED.value && order.is_comment == 0 && order.goods[0].refund !==null">
					<view class="btn-item item-pay" @click="tuiInfo(order.goods[0].refund.order_refund_id)">查看详情</view>
				</block>
			</view>
		</view>
		<view v-if="order.order_status == OrderStatusEnum.CANCELLED.value" class="footer-fixed">
			<view class="btn-wrapper">
				<!-- 已取消 -->
				<block v-if="order.order_status == OrderStatusEnum.CANCELLED.value">
					<view class="btn-item gou-pay" @click="handleAddCart(order)">加入购物车</view>
				</block>
			</view>
		</view>
		<!-- 加入购物车组件 -->
		<AddCartPopup ref="AddCartPopup" @addCart="onUpdateCartTabBadge" />
	</view>
</template>

<script>
	import {
		OrderTypeEnum,
		DeliveryStatusEnum,
		DeliveryTypeEnum,
		OrderStatusEnum,
		PayStatusEnum,
		ReceiptStatusEnum
	} from '@/common/enum/order'
	import {
		DeliveryMethodEnum
	} from '@/common/enum/order/delivery'
	import * as OrderApi from '@/api/order'
	import AddCartBtn from '@/components/add-cart-btn'
	import AddCartPopup from '@/components/add-cart-popup'

	export default {
		components: {
			AddCartBtn,
			AddCartPopup
		},
		data() {
			return {
				// 枚举类
				OrderTypeEnum,
				DeliveryStatusEnum,
				DeliveryTypeEnum,
				OrderStatusEnum,
				PayStatusEnum,
				ReceiptStatusEnum,
				DeliveryMethodEnum,
				// 当前订单ID
				orderId: null,
				// 加载中
				isLoading: true,
				// 当前订单详情
				order: {},
				// 当前设置
				setting: {},
				// 控制onShow事件是否刷新订单信息
				canReset: false,
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad({
			orderId
		}) {
			// 当前订单ID
			this.orderId = orderId
			// 获取当前订单信息
			this.getOrderDetail()
			// 注册全局事件订阅: 是否刷新当前订单数据
			uni.$on('syncRefresh', (val, isCur) => {
				if (!isCur) {
					this.canReset = val
				}
			})
			
			uni.$on('syncRefresh2', (val, isCur) => {
				this.getOrderDetail(true)
			})
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.canReset && this.getOrderDetail()
			this.canReset = false
		},

		methods: {
			goBack() {
				wx.navigateTo({
					url:'/pages/order/index'
				})
				// 返回上一页
				// wx.navigateBack({
				// 	delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
				// });
			},

			// 获取当前订单信息
			getOrderDetail(canReset = false) {
				
				const app = this
				app.isLoading = true
				// OrderApi.detail({orderId:app.orderId, out_trade_no:'2025041810256102'})
				OrderApi.detail({ orderId:app.orderId, out_trade_no:'' })
					.then(result => {
						app.order = result.data.order
						app.setting = result.data.setting
						app.isLoading = false
						
					})
				// 相应全局事件订阅: 刷新上级页面数据
				canReset && uni.$emit('syncRefresh', true, true)
			},

			// 复制指定内容
			handleCopy(value) {
				const app = this
				uni.setClipboardData({
					data: value,
					success: () => app.$toast('复制成功'),
					fail: ({
						errMsg
					}) => app.$toast('复制失败 ' + errMsg)
				})
			},

			// 跳转到物流跟踪页面
			handleTargetExpress() {
				this.$navTo('pages/order/express/index', {
					orderId: this.orderId
				})
			},

			// 跳转到商品详情页面
			handleTargetGoods(goodsId) {
				this.$navTo('pages/goods/detail', {
					goodsId
				})
			},

			// 跳转到申请售后页面
			handleApplyRefund(orderGoodsId) {
				this.$navTo('pages/refund/apply', {
					orderGoodsId
				})
			},

			// 取消订单
			onCancel(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认要取消该订单吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.cancel(orderId)
								.then(result => {
									// 显示成功信息
									app.$toast(result.message)
									setTimeout(() => {
										// 刷新当前订单数据
										app.getOrderDetail(true)
									}, 1500)
								})
						}
					}
				});
			},
			// 撤销取消
			onRevokeCancel(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认要撤销该订单吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.revokeCancel(orderId)
								.then(result => {
									// 显示成功信息
									app.$toast(result.message)
									setTimeout(() => {
										// 刷新当前订单数据
										app.getOrderDetail(true)
									}, 1500)
								})
						}
					}
				});
			},
			// 确认收货
			onReceipt(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认收到商品了吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.receipt(orderId)
								.then(result => {
									// 显示成功信息
									app.$success(result.message)
									setTimeout(() => {
										// 刷新当前订单数据
										app.getOrderDetail(true)
									}, 1500)
								})
						}
					}
				});
			},
			// 点击加入购物车
			handleAddCart(order) {
				console.log(order.goods)
				for (var i = 0; i < order.goods.length; i++) {
					console.log(order.goods[i])
					this.$refs.AddCartPopup.handle(order.goods[i])
				}
				// this.$refs.AddCartPopup.handle(item)
			},
			// 点击去支付
			onPay(orderId) {
				this.$navTo('pages/checkout/cashier/index', {
					orderId
				})
			},
			// 退款售后查看详情
			tuiInfo(orderRefundId) {
				console.log(orderRefundId)
				this.$navTo('pages/refund/detail', {
					orderRefundId
				})
			},
			// 撤销售后
			onReCancle(orderRefundId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认要撤销售后吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.reCancle(orderRefundId)
								.then(result => {
									// 显示成功信息
									app.$toast(result.message)
									setTimeout(() => {
										// 刷新当前订单数据
										app.getOrderDetail(true)
									}, 1500)
								})
						}
					}
				});
			},
			
			// 跳转到订单评价页
			handleTargetComment(orderId) {
				this.$navTo('pages/order/comment/index', {
					orderId
				})
			},

		},

	}
</script>
<style>
	page {
		background: linear-gradient(#FBFDF5 0%, #FFFFFF 200%) !important;
	}
</style>
<style lang="scss" scoped>
	.container {
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
	}

	.main-header {
		background-color: #FFF;
		position: relative;
		width: 100%;
		height: 280rpx;
		background-size: 100% 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding-left: 30rpx;

		.posBtn {
			position: absolute;
			z-index: 99;
			top: 90rpx;
			left: 30rpx;
			width: 20rpx;
			font-size: 30rpx;

			.image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.posStaticBot {
			width: 100%;
			font-weight: bold;
			font-size: 36rpx;
			color: #1A8148;
			position: absolute;
			z-index: 99;
			bottom: 48rpx;
			left: 5%;
		}

	}

	.card-area {
		position: relative;
	}

	// 页面顶部
	.posStaticTop {
		width: 100%;
		font-weight: bold;
		font-size: 36rpx;
		color: #1A8148;
		position: absolute;
		z-index: 100;
		top: -180rpx;
		left: 0;


		.topStatus {
			font-weight: bold;
			font-size: 36rpx;
			color: #1A8148;
			margin-bottom: 32rpx;
			margin-left: 5%;
		}

		.order-status {
			width: 92%;
			display: flex;
			background: #fff;
			border-radius: 10rpx;
			height: 146rpx;
			padding: 30rpx 25rpx;
			margin-left: 5%;
			align-items: center;
			justify-content: space-between;
			.status-icon {
				width: 20rpx;
				height: 20rpx;

				.image {
					display: block;
					width: 100%;
					height: 100%;
				}

				.hide-status {
					display: none;
				}

			}

			.dizhi-flex {
				display: flex;
				align-items: center;
			}

			.status-text {
				padding-left: 10rpx;
				// color: #ED6F4C;
				// font-size: 38rpx;
				font-size: 28rpx;
				color: #ED6F4C;
			}

		}

		.statu-wuliu{
			width:100%;
			.info-item{
				display:flex;
				align-items: center;
				margin-top: 8rpx;
			}
			.item-lable{
				font-size: 26rpx;
				color: #042111;
				font-weight: 400;
			}
			.itemwu-shuju{
				font-size: 26rpx;
				color: #7D8D84;
				font-weight: 400;
			}
			.act-copy {
			    margin-left: 10rpx;
			    font-size: 28rpx;
			    color: #042111;
				font-weight: 400;
			}
			.item-content{
				display:flex;
				align-items: center;
			}
		}
		.iconfont{
			color: #A9B5AE;
			font-size: 26rpx;
		}
	}

	.next-action {
		display: flex;
		align-items: center;
		height: 128rpx;

		.action-btn {
			min-width: 152rpx;
			height: 56rpx;
			padding: 0 30rpx;
			border-color: #666666;
			cursor: pointer;
			-webkit-user-select: none;
			user-select: none;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #1A8148;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}
	}


	// 通栏卡片
	.flex-card {
		display: flex;
		align-items: center;
	}

	// 通栏卡片
	.i-card {
		padding: 30rpx 30rpx;
		width: 100%;
		border-radius: 20rpx;
	}
	.statuskong{
		width:100%;
		height: 40rpx;
	}
	// 收货地址
	.delivery-address {


		.link-man {
			font-size: 24rpx;
			color: #7D8D84;
			padding-left: 24rpx;

			.name {
				margin-right: 10rpx;
			}
		}
		.mt40{
			margin-top:40rpx;
		}
		.address {
			font-size: 28rpx;
			color: #042111;
			display: flex;
			align-items: center;

			.detail {
				margin-left: 6rpx;
			}

			.area-image {
				width: 20rpx;
				height: 24rpx;
				display: block;
				/* mrgin-top: 11rpx; */
				margin-right: 5rpx;
			}
		}

	}

	// 物流公司
	.express {
		display: flex;
		align-items: center;
		border-top: 10rpx solid #F8F8F8;
		border-radius: 0rpx;

		.main {
			flex: 1;
		}

		.info-item {
			display: flex;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.item-lable {
				display: flex;
				font-size: 26rpx;
				color: #042111;
				margin-right: 10rpx;
			}

			.item-shuju {
				font-size: 26rpx;
				color: #7D8D84;
			}

			.item-content {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;

				.act-copy {
					margin-left: 10rpx;
					font-size: 28rpx;
					color: #042111;
				}
			}
		}

		// 右侧箭头
		.right-arrow {
			margin-left: 16rpx;
			font-size: 26rpx;
		}

	}

	.kong {
		width: 100%;
		height: 10rpx;
		background: #F8F8F8;
	}

	// 商品列表
	.goods-list {

		// 商品项
		.goods-item {
			margin-bottom: 40rpx;

			&:last-child {
				margin-bottom: 0;
			}

			// 商品信息
			.goods-main {
				display: flex;
			}

			// 商品图片
			.goods-image {
				width: 180rpx;
				height: 180rpx;

				.image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			// 商品内容
			.goods-content {
				flex: 1;
				padding-left: 16rpx;
				padding-top: 16rpx;

				.goods-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #042111;
				}

				.goods-props {
					margin-top: 14rpx;
					color: #ababab;
					font-size: 24rpx;
					overflow: hidden;

					.goods-props-item {
						padding: 4rpx 16rpx;
						border-radius: 12rpx;
						background-color: #fcfcfc;
					}
				}


			}

			// 交易信息
			.goods-trade {
				padding-top: 16rpx;
				width: 100%;
				text-align: right;
				color: $uni-text-color-grey;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 60rpx;

				.goods-num {
					font-weight: bold;
					font-size: 28rpx;
					color: #042111;
				}

				.goods-price {
					vertical-align: bottom;
					font-weight: bold;
					font-size: 28rpx;
					color: #ED6F4C;

					.unit {
						margin-right: -2rpx;
						font-weight: bold;
						font-size: 32rpx;
						color: #1A8148;
					}

					.value {
						font-weight: bold;
						font-size: 32rpx;
						color: #1A8148;
					}
				}
			}
			.refound-flex{
				width:100%;
				display:flex;
				justify-content: flex-end;
				align-items: center;
			}
			// 商品售后
			.goods-refund {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.stata-text {
					color: #1A8148;
					margin-top: 10rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #1A8148;
					font-size: 26rpx;
					text-align: center;
					padding: 4rpx 15rpx;
					margin-top: 10rpx;
				}

				.action-btn {
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #7D8D84;
					font-size: 26rpx;
					color: #7D8D84;
					text-align: center;
					padding: 4rpx 15rpx;
					margin-top: 10rpx;
					margin-left: 10rpx;
				}
			}

		}

	}

	// 订单信息
	.order-info {

		.info-item {
			display: flex;
			margin-bottom: 24rpx;
			justify-content: space-between;
			align-items: center;

			&:last-child {
				margin-bottom: 0;
			}

			.item-lable {
				font-size: 24rpx;
				color: #042111;
			}

			.item-content {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #A9B5AE;
				text-align: right;

				.act-copy {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #042111;
				}
			}
		}

	}

	.item-shuju {
		font-size: 24rpx;
		color: #042111;
	}

	// 交易信息
	.trade-info {

		.info-item {
			display: flex;
			margin-bottom: 24rpx;

			.item-lable {
				font-size: 24rpx;
				color: #042111;
			}



			.item-content {
				flex: 1;
				font-size: 26rpx;
				color: #A9B5AE;
				text-align: right;
			}

			.all-price {
				font-weight: bold;
				font-size: 24rpx;
				color: #042111;
			}

			.pay-all {
				font-weight: bold;
				font-size: 28rpx;
				color: #ED6F4C;
			}
		}

		.divider {
			height: 1rpx;
			background: #f1f1f1;
			margin-bottom: 24rpx;
		}

		.trade-total {
			display: flex;
			justify-content: flex-end;

			.goods-price {
				margin-left: 12rpx;
				vertical-align: bottom;
				font-weight: bold;
				font-size: 28rpx;
				color: #ED6F4C;

				.unit {
					margin-right: -2rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #ED6F4C;
				}
			}
		}

	}

	// 底部操作栏
	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;
		background: #F8F8F8;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.btn-wrapper {
			height: 106rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 30rpx;

		}
		.goods-item{
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		.btn-item {
			min-width: 180rpx;
			background: #1A8148;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 12rpx 26rpx;
			font-size: 28rpx;
			color: #ffffff;
			text-align: center;
			border: 1rpx solid #1A8148;
			margin-left: 24rpx;

			&.active {
				border: none;
				background: #1A8148;
				color: #ffffff;
			}
		}

		.item-pay {
			width: 100%;
			line-height: 60rpx;
			margin: 0 auto;
			background: #1A8148;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 12rpx 26rpx;
			font-size: 28rpx;
			color: #ffffff;
			text-align: center;
			border: 1rpx solid #1A8148;
		}

		.gou-pay {
			background: #F8F8F8;
			color: #1B8147;
			border: 1px solid #1B8147;
		}
		.item-gou-pay{
			background: #1A8148;
			color: #ffffff;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}

		.hui {
			color: #9EAAA3;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #808F86;
			background: #F8F8F8;
		}
	}
</style>